<template>
	<view class="">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="其他活动" autoBack>
			</u-navbar>
		</view>


		<view class="con-body wrap">
			<view style="height: 20rpx;"></view>
			<!-- 其他活动 -->
			<view class="uni-flex-center" style="padding: 0 10rpx;">
				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无活动~" :show="showEmpty">
				</u-empty>
				<view class="a_list u-flex u-row-between" v-for="(item, index) in active" :key="index" @click="activeDetail(item.id,item.status)">
					<view class="a_left_con u-rela">
						<view class="a_title">
							<text>{{item.title}}</text>
						</view>
						<view class="a_sponsor">主办方：{{item.sponsor}}</view>
						<view class="a_address">活动地址：{{item.address}}</view>
						<view class="a_limit" v-if="item.limit == 0">参与人数：<text style="color:#0B868E;">{{item.join}}</text>/不限</view>
						<view class="a_limit" v-else>参与人数：<text style="color:#0B868E;">{{item.join}}</text>/{{item.limit}}</view>
						<view class="u-flex u-row-between" style="margin-top:20rpx;">
							<text class="a_time">{{item.time}}</text>
							<text class="a_free" v-if="item.free == 0">免费</text>
							<text class="a_free" v-else>￥{{item.price}}/人</text>
						</view>
						<view v-if="item.status == -1" class="a_status">
							<u-image width="120rpx" height="120rpx"
								src="https://resourse.cnlhjt.com/upload/20220825/23a08670c569a7ed00a0f6cc135c250b.png">
							</u-image>
						</view>
					</view>
					<image class="a_img" mode="aspectFill" :src="item.image"></image>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getList
	} from "@/service/communitService.js";
	export default {
		data() {
			return {
				active: [],
				page: 1,
				limit: 10,
				showEmpty:false
			}
		},
		onLoad() {
			getList({
				page: this.page,
				limit: this.limit
			}).then(this.getList);
		},
		methods: {
			getList(e) {
				if (e.code == 200) {
					this.active = e.result;
					this.showEmpty=false;
				}else{
					this.showEmpty=true;
					this.active=[]
				}
			},
			activeDetail(id, status) {
				if(status == -1){
					uni.showToast({
						title: '活动已结束',
						icon: "error"
					});
					return;
				}
				this.$u.route({
					url: "/pagesCommunity/index/active-detail",
					params: {
						gid: id
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
	.wrap {
		width: 96%;
		margin-left: 2%;
		margin-bottom: 44rpx;
	}

	.iconType {
		display: flex;
		padding: 10rpx 10rpx;
		background-color: #fefefe;
		justify-content: space-between;
	}

	.icon {
		height: auto;
	}

	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #13227a;
		font-size: 28rpx;
	}
	.a_list{
		padding:15rpx 10rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		// border-bottom:1rpx solid #ddd;
		.a_left_con{
			width:58%;
			.a_title{
				margin-bottom:20rpx;
			}
			.a_title text{
				font-size: 22rpx; font-weight: 600; padding: 10rpx 22rpx; color: #fff; 
				font-family: Arial, Helvetica, sans-serif;
				background-image: url('https://resourse.cnlhjt.com/upload/20220825/605402e1cc43dd5e1964b57f5ea66b8c.png');
				background-size: 100% 100%;
			}
			.a_sponsor,.a_address,.a_limit{
				font-size: 22rpx; color: #666;
				margin-top:10rpx;
			}
			.a_time{
				font-size: 24rpx;color:#82848A;
			}
			.a_free{
				font-size: 30rpx;color: red;font-weight: bold;
			}
		}
		.a_img{
			width:40%;
			height:240rpx;
			border-radius: 20rpx;
		}
		.a_status{
			position: absolute;
			top:0rpx;
			right:20rpx;
		}
	}
	
</style>
